<!--
 * @Date: 2023-02-18 11:12:39
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-30 17:32:54
 * @FilePath: \A19\frontend\src\components\Class\LiveSend.vue
-->
<template>
 
  <LivePanel  :courseInfo="courseInfo" :students="students" :wsClient="wscli" :courseId="courseId" :cameraStream="cameraStream" :selfAudioOn="liveOption" >
    <template #video>
      <video ref="videoRef" class="video" src="" autoplay muted ></video>
    </template>
    <template v-slot:controls>
      <ElButton
      :disabled="!connected || liveOption.channel === 'screen'"
      @click="shareScreen"
      >共享屏幕</ElButton
      >
      <ElButton
        :disabled="!connected || liveOption.channel === 'camera'"
        style="margin-right: 20px;"
        @click="camera"
        >开启摄像头</ElButton
      >
      <el-dropdown>
        <div class="sound" @click="mute">
          <img :src="returnSrc">
        </div>
        <template #dropdown>
          <el-dropdown-menu style="padding: 15px 0 10px;">
            <el-slider v-model="value" size="small" vertical height="150px" />
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-checkbox
        v-model="liveOption.video"
        label="视频开启"
        size="large"
        :disabled="liveOption.channel === 'screen'"
      />
      <el-checkbox v-model="liveOption.audio" label="麦克风开启" size="large" style="margin-right: 20px;" />
      <!-- <el-checkbox v-show="liveOption.channel === 'screen'" v-model="liveOption.screenAudio" label="共享声音" size="large" /><br> -->
      <ElButton v-show="liveOption.channel === 'screen'" @click="reShare"
        >重新共享</ElButton
      >
    </template>
  </LivePanel>
</template>

<script lang="ts" setup>
import { wsLiveHost } from "@/hooks/wsLiveHost";
import { ref,computed,watch } from "vue";
import { useRoute } from 'vue-router';

const route = useRoute()
const courseId = route.params.courseId as string

const returnSrc = computed(() =>{
  return (muted.value?'/muted.png':'/volume.png')
})
let lastV = 100
const value = ref(0)
const muted = computed(() =>{
  return value.value === 0
})
const mute = ()=>{
  videoRef.value!.muted = false
  if(!muted.value){
    lastV = value.value
    value.value = 0
  }
  else{
    value.value = lastV
  }
}
watch(value,newValue =>{
  // console.log(newValue);
  if(newValue !== 0)  videoRef.value!.muted = false
  videoRef.value!.volume = newValue / 100
})

//hooks
const {
  courseInfo,
  connected,
  liveOption,
  shareScreen,
  camera,
  reShare,
  students,
  wscli,
  videoRef,
  cameraStream
} = wsLiveHost(courseId,value);

</script>

<style lang="less" scoped>
.video {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  // background-color: black;

  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.sound{
  margin-right: 20px;
  cursor: pointer;
  img{
    height: 26px;
  }
}
</style>

